<template>
    <div class="BookingManagement">

        <!-- 版心 -->
        <div class="Booking_wrap">

             <!-- 头部 -->
      <div class="header">
       

        <div class="header_bottom">
          <div class="header_left">
           
            <div class="header_number">
              未提现总额：
              <span>{{ze}}</span>
            </div>
          </div>

        </div>
      </div>

      <!-- 头部结束 -->

       <!-- 表格 -->

<el-table
    :data="tableData"
   :row-class-name="tableRowClassName" 
     v-loading="loading"
    >
    <el-table-column
      type="index"
      label="序号"
    width="120"
    
      :index="indexMethod"
      
      >
    </el-table-column>
     <el-table-column
      prop="gym_phone"
      label="手机号"
     >
    </el-table-column>
    <el-table-column
      prop="gym_name"
      label="场馆名称"
      >
    </el-table-column>
     <el-table-column
      prop="money"
      label="收益总额"
      >
    </el-table-column>
   
    
     <!-- <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          style="color:#fff;background:#2f7dfe;"
          @click="handleEdit(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column> -->
  </el-table>
  <div style="float: right;margin-right: 19.7%;">
            <el-pagination
        @current-change='yemian'
        :current-page='yeshu'
        layout="prev, pager, next"
        :total='zs'>
        </el-pagination>
        </div>
       </div>
        </div>
        <!-- 版心结束 -->
    </div>
</template>
<script>
export default {
    data(){
        return{
        tableData: [{
          gym_phone:'15135934855',
          gym_name:'奥德健身蜗牛瑜家旗舰店',
          money:'￥49',
        }],
        ze:'',
        yeshu:1,
        zs:'',
        loading:true,
        value1:''

        }
    },
    mounted(){
       var obj={
           
       }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findAllRecommendBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          _this.tableData=response.data.data[1]
          _this.ze=response.data.data[0]
          _this.zs=response.data.data[2]
          _this.loading=false
        })
        .catch((error)=> {
            console.log(error);
        });
    },
    methods:{
    yemian(yeshu){
       var obj={
           page:yeshu
       }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/findAllRecommendBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          _this.tableData=response.data.data[1]
          _this.ze=response.data.data[0]
          _this.zs=response.data.data[2]
          _this.loading=false
        })
        .catch((error)=> {
            console.log(error);
        });
    },  
   indexMethod(index) {
        return index * 1+1;
      },
       handleEdit(index, row) {
        console.log(index, row);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
    }
  
}
</script>
<style>
    .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table__body .el-table__row td:nth-child(5) .cell{
    color:#a93b3b!important;

}
</style>
<style scoped>

.BookingManagement{
 width: 100%;
  height: 100%;
  background: #f2f2f2;
  position: absolute;
  left: 250px;
  top: 0;
  z-index: 2;
}
/* 版心 */
.Booking_wrap{
 width: 100%;

  height: 100%;

  margin-left: 3%;
}
.Booking_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.Booking_wrap .header .header_top .el-input{
    width: 8%;
    

}

.Booking_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.Booking_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.Booking_wrap .header .header_bottom .header_name {
  font-size: 15px;

  color: #000000;
  display: flex;
  align-items: center;
}
.Booking_wrap .header .header_bottom .header_name .el-select{
    width: 65%;
}
.Booking_wrap .header .header_bottom .header_name span {
  color: #286fe6;
}

.Booking_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 26px;
}

.Booking_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}


/* 版心结束 */
/* 表格 */
.el-table{
    width: 80%;
    margin-top: 20px;

}
.el-table tr th{
text-align: center!important;
}
</style>


